'use client';

// RHF
import { useFormContext } from 'react-hook-form';

// ShadCn
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';

// Hooks
import useCurrencies from '@/hooks/useCurrencies';

// Types
import { CurrencyType, NameType } from '@/types';

type CurrencySelectorProps = {
    name: NameType;
    label?: string;
    placeholder?: string;
};

const CurrencySelector = ({ name, label, placeholder }: CurrencySelectorProps) => {
    const { control } = useFormContext();

    const { currencies, currenciesLoading } = useCurrencies();

    return (
        <div>
            <FormField
                control={control}
                name={name}
                render={({ field }) => (
                    // @ts-ignore
                    <FormItem>
                        <div className="flex justify-between gap-5 items-center text-sm">
                            <div>
                                {/* @ts-ignore */}
                                <FormLabel>{label}:</FormLabel>
                            </div>
                            <div>
                                {/* @ts-ignore */}
                                <Select {...field} defaultValue={field.value} onValueChange={field.onChange}>
                                    {/* @ts-ignore */}
                                    <FormControl>
                                        {/* @ts-ignore */}
                                        <SelectTrigger className="w-[13rem]">
                                            {/* @ts-ignore */}
                                            <SelectValue placeholder={placeholder} />
                                        </SelectTrigger>
                                    </FormControl>
                                    {/* @ts-ignore */}
                                    <SelectContent
                                        style={{
                                            overflowY: 'hidden',
                                            height: '200px',
                                        }}
                                    >
                                        {/* @ts-ignore */}
                                        <SelectGroup>
                                            {/* @ts-ignore */}
                                            <SelectLabel>Currencies</SelectLabel>
                                            {!currenciesLoading &&
                                                currencies.map((currency: CurrencyType, idx: number) => (
                                                    // @ts-ignore
                                                    <SelectItem key={idx} value={currency.code}>
                                                        {currency.name} {`(${currency.code})`}
                                                    </SelectItem>
                                                ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                                {/* @ts-ignore */}
                                <FormMessage />
                            </div>
                        </div>
                    </FormItem>
                )}
            />
        </div>
    );
};

export default CurrencySelector;
